<template>
  <div class="coupon">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>营销活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>团购券活动设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <div class="coupon-top">
        <el-form :inline="true"
          class="demo-form-inline">
          <el-form-item>
            <el-dropdown @command="setType_state">
              <span class="el-dropdown-link">
                {{typeStr_state}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{title:'全部类型',id:''}">全部类型</el-dropdown-item>
                <el-dropdown-item :command="{title:'待开始',id:'1'}">待开始</el-dropdown-item>
                <el-dropdown-item :command="{title:'进行中',id:'2'}">进行中</el-dropdown-item>
                <el-dropdown-item :command="{title:'已结束',id:'3'}">已结束</el-dropdown-item>
                <el-dropdown-item :command="{title:'已失效',id:'5'}">已失效</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入活动标题/券名称"
              v-model="search"
              clearable></el-input>
          </el-form-item>
          <!-- 查询 -->
          <el-form-item>
            <el-button type="primary"
              @click.native="_reset"
              size="small"
              style="width:60px">
              <i class="el-icon-search"></i>
            </el-button>
          </el-form-item>
          <el-form-item class="fr"
            v-has="'marketingbuyredact'">
            <el-button type="primary"
              size="small"
              style="width:100px"
              @click="add">
              新增团购券
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData"
        border>
        <el-table-column fixed width="300"
          prop="name"
          label="活动标题">
        </el-table-column>
        <el-table-column label="券名称"
          prop="couponName">

        </el-table-column>
        <el-table-column prop="sellNum"
          label="总库存">
        </el-table-column>
        <el-table-column prop="sellSum" width="100"
          label="已售数量">
        </el-table-column>
        <el-table-column prop="activityTime"
          label="销售日期">
        </el-table-column>
        <el-table-column prop="stateName"
          label="状态">
        </el-table-column>
        <el-table-column label="海报">
          <template slot-scope="scope">
            <el-button type="text"
              slot="reference"
              v-if="scope.row.posterUrl"
              @click="look_poster(scope.row.posterUrl)">查看海报</el-button>
            <el-button type="text"
              slot="reference"
              @click="_poster(scope.row)">
              {{scope.row.posterUrl?'重新生成':'生成海报'}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
          label="操作"
          width='350'>
          <template slot-scope="scope">
            <el-button @click="details(scope.row)"
              type="text"
              size="small">购券详情</el-button>
            <el-button v-if="scope.row.state == 1"
              type="text"
              size="small"
              @click="_edit(scope.row)"
              v-has="'marketingbuystate'">
              编辑
            </el-button>
            <el-button type="text"
              size="small"
              @click="detail(scope.row)"
              v-has="'marketingbuystate'">
              查看活动详情
            </el-button>
            <el-button v-if="scope.row.state !== 3"
              @click="disabled(scope.row)"
              type="text"
              size="small"
              v-has="'marketingbuystate'">提前结束</el-button>
            <el-button @click="delelte(scope.row)"
              v-if="scope.row.state == 3"
              type="text"
              size="small"
              v-has="'marketingbuystate'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10,20,30,40]"
        :page-size="pageSize"
        layout="total, prev , pager , next, sizes"
        :total="total"
        style="margin-top:20px">
      </el-pagination>
    </div>
    <el-dialog title="海报"
      :visible.sync="dialogVisible2"
      width="375px">
      <div class="content"
        style="text-align:center">
        <img :src="posterImg"
          width="340"
          alt="">
        <el-button type="primary"
          style="width:100%;margin-bottom:10px"
          @click="downloadIamge(posterImg,pic)">下载海报</el-button>
      </div>
    </el-dialog>
    <!-- 购券详情 -->
    <el-dialog title="购券详情"
      :visible.sync="dialogFormVisible">
      <el-form>
        <div style="padding-bottom:15px">
          <span>{{userInfo.name}}活动,</span>
          <span>库存: {{userInfo.sellNum}}张券,</span>
          <span>已售: {{userInfo.sellSum }}张,</span>
          <span>剩余: {{userInfo.sellNum-userInfo.sellSum}}张</span>
        </div>
      </el-form>
      <el-table :data="sellList"
        max-height="500">
        <el-table-column property="name"
          label="购买人"
          width="150"></el-table-column>
        <el-table-column property="createTime"
          label="购买时间"
          width="200"></el-table-column>
        <el-table-column property="sellNum"
          label="购买数量"></el-table-column>
        <el-table-column label="购券详情">
          <template slot-scope="scope">
            <OrderDetail :id="scope.row.id" />
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 活动详情  优惠券-->
    <div class="activity">
      <el-dialog title="活动详情"
        :visible.sync="dialog_couponInfos">
        <el-form style="margin-bottom:20px;">
          <div>
            <span>活动名称: {{activityInfos.name}}</span>
          </div>
        </el-form>
        <el-table :data="couponInfos"
          height="250">
          <el-table-column property="type"
            label="券类型"
            width="150"></el-table-column>
          <el-table-column property="name"
            label="券名称"
            width="200"></el-table-column>
          <el-table-column label="券说明">
            <template slot-scope="scope">
              <span v-if="scope.row.type =='代金券'">{{scope.row.faceValue}}元</span>
              <span v-if="scope.row.type =='折扣券'">{{Math.round(scope.row.faceValue * 10) / 100.0}}折</span>
              <span v-if="scope.row.type =='礼品券'">{{scope.row.faceValue}}</span>
            </template>
          </el-table-column>
          <el-table-column property="money"
            label="价格"></el-table-column>
          <el-table-column property="doorsill"
            label="使用门槛"></el-table-column>
          <el-table-column property="scopeName"
            label="适用范围"></el-table-column>
          <el-table-column property="valid"
            label="有效期"
            width='200'></el-table-column>
          <el-table-column property="state"
            label="状态"></el-table-column>
        </el-table>
        <div style="margin-top:10px;">
          <span>活动时间: {{activityInfos.activityTime}}</span>
        </div>
        <div style="margin:10px 0">
          <span>出售数量: {{activityInfos.sellNum}}张</span>
        </div>
        <div>
          <span>购买限制: 每人限购 {{activityInfos.quota}}张</span>
        </div>

        <div slot="footer"
          class="dialog-footer">
          <el-button @click="dialog_couponInfos = false">取 消</el-button>
          <el-button type="primary"
            @click="dialog_couponInfos = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 活动详情  优惠券包-->
    <div class="activity">
      <el-dialog title="活动详情"
        :visible.sync="dialog_bagInfos">
        <el-form>
          <div>
            <span>活动名称: {{activityInfos.name}}</span>
          </div>
        </el-form>
        <ul>
          <li v-for="(item,index) in bagInfos"
            :key="index">
            <div style="margin:10px 0;color:#000000">
              <span style="width:200px;display:inline-block">券包名称: {{item.bagName}}</span>
              <span>券包价格: ￥{{item.bagMoney}}</span>
            </div>
            <el-table :data="item.couponInfos"
              height="auto">
              <el-table-column property="type"
                label="券类型"
                width="150"></el-table-column>
              <el-table-column property="name"
                label="券名称"
                width="200"></el-table-column>
              <el-table-column label="券说明">
                <template slot-scope="scope">
                  <span v-if="scope.row.type =='代金券'">{{scope.row.faceValue}}元</span>
                  <span v-if="scope.row.type =='折扣券'">{{Math.round(scope.row.faceValue * 10) / 100.0}}折</span>
                  <span v-if="scope.row.type =='礼品券'">{{scope.row.faceValue}}</span>
                </template>
              </el-table-column>
              <el-table-column property="doorsill"
                label="使用门槛"></el-table-column>
              <el-table-column property="scopeName"
                label="适用范围"></el-table-column>
              <el-table-column property="valid"
                label="有效期"
                width='200'></el-table-column>
              <el-table-column property="state"
                label="状态"></el-table-column>
            </el-table>
          </li>
        </ul>
        <div style="margin-top:10px;">
          <span>活动时间: {{activityInfos.activityTime}}</span>
        </div>
        <div style="margin:10px 0">
          <span>出售数量: {{activityInfos.sellNum}}张</span>
        </div>
        <div>
          <span>购买限制: 每人限购 {{activityInfos.quota}}张</span>
        </div>

        <div slot="footer"
          class="dialog-footer">
          <el-button @click="dialog_bagInfos = false">取 消</el-button>
          <el-button type="primary"
            @click="dialog_bagInfos = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  GetOnlinePurchase,
  StateOnlinePurchase,
  RecordOnlinePurchase,
  ActivityOnlinePurchase,
  poster
} from "@/public/js/saleRoom";
import { create } from "domain";
import OrderDetail from "./OrderDetail";
export default {
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      type: "",
      name: "",
      state: "",
      typeStr_state: "全部状态",
      total: 0,
      pageNo: 1,
      bagId: "",
      couponName: "",
      couponType: "",
      userInfo: "",
      activityInfos: "", //活动详情
      bagInfos: [], //活动详情优惠券包
      couponInfos: [], //活动详情优惠券
      typeStr: "全部类型",
      search: "",
      tableData: [],
      sellList: [],
      flg_data: true,
      dialogVisible2: false,
      buyTypes: [
        {
          money: 1
        }
      ],
      gridData: "",
      dialogFormVisible: false, //购券详情
      dialog_couponInfos: false, //活动详情优惠券
      dialog_bagInfos: false, //活动详情优惠券包
      formLabelWidth: "120px",
      posterImg: ""
    };
  },
  components: {
    OrderDetail
  },
  created() {
    this._GetOnlinePurchase();
  },
  mounted() {},
  methods: {
    // 获取线购券列表
    _GetOnlinePurchase() {
      var data = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        search: this.search,
        type: parseInt(this.type),
        state: this.state
      };
      GetOnlinePurchase(data).then(res => {
        this.tableData = res.data.buyList;
        this.total = res.data.total;
        this.tableData.forEach(item => {});
      });
    },
    //查看海报
    look_poster(posterUrl) {
      this.posterImg = posterUrl;
      this.dialogVisible2 = true;
    },
    //生成海报
    _poster(row) {
      poster({ id: row.id }).then(res => {
        if (!res.data.errCode) {
          row.posterUrl = res.data.path;
          this.$message.success("生成海报成功");
        }
      });
    },
    //下载
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    // 下拉选择
    setType(e) {
      this.search = "";
      this.type = e.id;
      e.id == 1
        ? (this.typeStr = "券包")
        : e.id == 2 ? (this.typeStr = "优惠券") : (this.typeStr = "全部类型");
      this._reset();
    },
    // 全部状态下拉选择
    setType_state(e) {
      this.search = "";
      this.state = e.id;
      this.typeStr_state = e.title;
      this._reset();
    },
    //查询
    _reset() {
      this.pageSize = 10;
      this.pageNo = 1;
      this._GetOnlinePurchase();
    },
    // 查看订单详情
    orderDetail(id) {
      console.log(id);
    },
    // 新增
    add() {
      this.$router.push("/index/AddOnlinePurchase");
    },
    // 编辑
    _edit(item) {
      this.$router.push(
        "/index/AddOnlinePurchase?id=" + item.id + "&state=" + item.state
      );
    },
    //查看活动详情
    detail(item) {
      this.$router.push("/index/AddOnlinePurchase?id=" + item.id + "&type=1");
    },
    // 购券详情
    details(row) {
      this.dialogFormVisible = true;
      this.userInfo = row;
      var data = {
        id: row.id
      };
      RecordOnlinePurchase(data).then(res => {
        this.sellList = res.data.sellList;
      });
    },
    // 活动详情
    See(row) {
      if (row.ticketType == "优惠券") {
        this.dialog_couponInfos = true;
      }
      if (row.ticketType == "券包") {
        this.dialog_bagInfos = true;
      }
      var data = {
        id: row.id
      };
      ActivityOnlinePurchase(data).then(res => {
        this.activityInfos = res.data.activityInfos;
        this.bagInfos = res.data.activityInfos.bagInfos; //优惠券包
        this.couponInfos = res.data.activityInfos.couponInfos; //优惠券
        console.log(this.couponInfos);
      });
      // sessionStorage.setItem("userInfo", JSON.stringify(row));
      // this.$router.push("/index/SeeOnlinePurchase");
    },
    // 提前结束
    disabled(row) {
      var data = {
        id: row.id,
        state: 3
      };
      this.$confirm("此操作将提前结束该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          StateOnlinePurchase(data).then(res => {
            if (res.data.errCode == 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              row.check = true;
              this._GetOnlinePurchase();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作"
          });
        });
    },
    // 删除
    delelte(row) {
      var data = {
        id: row.id,
        state: 4
      };
      this.$confirm("此操作将删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        StateOnlinePurchase(data).then(res => {
          if (res.data.errCode == 0) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            row.check = true;
            this._GetOnlinePurchase();
          }
        });
      });
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this._GetOnlinePurchase();
    },
    handleCurrentChange(value) {
      this.pageNo = value;
      this._GetOnlinePurchase();
    }
  }
};
</script>
<style lang="scss">
.coupon {
  .activity {
    .el-dialog {
      width: 1100px;
    }
  }
  .el-dialog {
    width: 600px;
    .el-form-item__content {
      width: 315px;
    }
  }
  .sell {
    span {
      width: 45%;
      display: inline-block;
    }
  }
}
</style>
